<template>
    <div class="cs">
        <ComingSoon>
            <div class="movie" v-for="item of movies" :key="item.pic" @click="handleJump(item._id)">
                <div class="left">
                    <img class="pic" :src="item.pic">
                    <div class="righttxt">
                        <p class="title">{{item.title}}</p>
                        <div class="pf">
                            <span class="rating">{{item.rating}}</span>
                            <div class="star" v-for="(value,index) of handleStar(item.rating)" :key="index">
                                <img v-if="value>1.5" src="../../assets/star.png">
                                <img v-else-if="value>1" src="../../assets/ban-star.png">
                                <img v-else src="../../assets/none-star.png">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    购票
                </div>
            </div>
        </ComingSoon>
    </div>
</template>
<script>
import ComingSoon from '../../components/ComingSoon'

import axios from 'axios';
export default {
    name:"App",
    components:{
        ComingSoon
    },
    data(){
        return {
            movies:[]
        }
    },
    mounted(){
        // let url = "http://47.119.132.191:4000/api/movie/top250";
        let url = "http://47.108.197.28:4000/api/movie/top250";
        axios.get(url).then(res=>{
        this.movies = res.data.res;
        })
    },
    methods:{
        handleStar(ele){
        var arr=[];
        for(let i=0;i<5;i++){
            if(ele>=2){
            arr.push(2)
            }else if(ele>=0){
            arr.push(Number(ele.toFixed(1)))
            }else{
            arr.push(0)
            }
            ele = ele - 2;
        }
        return arr
        },
        handleJump(id){
            console.log(id)
            this.$router.push(`/film/${id}`)
        }
    }
}
</script>
<style  scoped>

</style>